<template>
	<view class="container">
		<view class="button">
			<u-button icon="plus" @tap="showAdds" type="success" text="新增用户" size="large"></u-button>
		</view>
		<view class="list">
			<view style="background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx #eee; padding: 24rpx; display: flex; align-items: center;">
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">用户名</text>
				</view>
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">昵称</text>
				</view>
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">头像</text>
				</view>
			</view>
			<u-empty mode="data" icon="data" v-show="user==null || user == ''">
			</u-empty>
			<view v-for="item in user" :key="item.id" style="border-top: 1rpx solid rgb(214, 215, 217);">
				<u-swipe-action>
					<u-swipe-action-item :options="[
			      { text: '修改', style: { background: '#007aff', color: '#fff' } },
			      { text: '删除', style: { background: '#dd524d', color: '#fff' } }
			    ]" @click="handleAction($event, item)">
						<view style="background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx #eee; padding: 24rpx; display: flex; align-items: center;">
							<view style="flex: 1; text-align: center;">
								<text style="font-weight: bold;">{{ item.username }}</text>
							</view>
							<view style="flex: 1; text-align: center;">
								<text>{{ item.nickname }}</text>
							</view>
							<view style="flex: 1; text-align: center;">
								<image :src="item.avatar" style="width: 80rpx; height: 80rpx; border-radius: 50%;" mode="aspectFill"></image>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>

		<u-popup :closeable="true" :close-on-click-overlay="true" @close="closeAdd" :show="showAdd" :round="10" mode="center" z-index="99" overlayStyle="z-index:90">
			<view class="" style="width: 500rpx;min-height: 100rpx;">
				<view class="title">{{title}}</view>
				<view class="content">
					<u--form labelPosition="left" :model="model" ref="uForm">
						<u-form-item label="用户名" prop="username" borderBottom>
							<u--input v-model="model.username" border="none" :disabled="flag == 1"></u--input>
						</u-form-item>
						<u-form-item label="昵称" prop="nickname" borderBottom>
							<u--input v-model="model.nickname" border="none"></u--input>
						</u-form-item>
						<u-form-item label="密码" prop="password" borderBottom v-if="flag != 1">
							<u--input type="password" v-model="model.password" border="none"></u--input>
						</u-form-item>
						<u-form-item label="再次输入密码" prop="repassword" v-if="flag != 1" borderBottom>
							<u--input type="password" v-model="model.repassword" border="none"></u--input>
						</u-form-item>
						<u-form-item label="头像" prop="avatar" borderBottom>
							<u-upload @delete="deleteImage" image-mode="widtnFixed" :file-list="fileList" accept="image" :max-count="1" @afterRead="afterRead"></u-upload>
						</u-form-item>
					</u--form>

					<view class="bottom">
						<view class="cancel" @tap.stop="closeAdd">取消</view>
						<view class="success" @tap.stop="handleSuccess">确认</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
	  getUserList,
	  insertUser,
	  editUser,
	  getUserDetail,
	  deleteUser
	} from '@/api/mine/user'
	import {
	  uploadFile
	} from '@/api/login'
	import {
	  getOneOrder
	} from '../../../api'
	export default {
	  data() {
	    return {
	      user: null,
	      showAdd: false,
	      title: '新增用户',
	      model: {
	        username: null,
	        password: null,
	        repassword: null,
	        nickname: null,
	        avatar: '',
	        type: 0
	      },
	      fileList: [],
	      flag: 0
	    }
	  },
	  onLoad() {
	    this.getUser()
	  },
	  methods: {
	    getUser() {
	      getUserList().then(response => {
					this.$nextTick(()=>{
						this.user = response.data
					})
	      })
	    },
	    showAdds() {
	      this.showAdd = true
	    },
	    closeAdd() {
	      this.fileList = []
	      this.$set(this.model, 'username', null)
	      this.$set(this.model, 'nickname', null)
	      this.$set(this.model, 'password', null)
	      this.$set(this.model, 'repassword', null)
	      this.$set(this.model, 'avatar', null)
	      this.showAdd = false

	    },
	    async afterRead(event) {
	      console.log(event)
	      this.fileList = [event.file]
	      const _ = this
	      uploadFile({
	        filePath: event.file.url
	      }).then((res) => {
	        console.log(res)
	        if (res.code == 200) {
	          // _.model.avatar = res.url
	          this.$set(this.model, 'avatar', res.url)
	        }
	      })
	    },
	    deleteImage() {
	      this.fileList = []
	      this.$set(this.model, 'avatar', null)
	    },
	    async handleSuccess() {

	      if (this.flag == 0) {
	        if (this.model.repassword != this.model.password) {
	          this.$modal.msgError('两次密码不一致')
	          return false;
	        }
	        this.$modal.loading('创建中')
	        const res = await insertUser(this.model)
	        console.log("insertUser==>", res);
	        if (res.code == 200) {
	          this.closeAdd()
	          this.getUser()
	        }
	      } else {
	        this.$modal.loading('修改中')
	        const res = await editUser(this.model)
	        if (res.code == 200) {
	          this.closeAdd()
	          this.getUser()
	        }
	      }
	      this.$modal.closeLoading()
	    },
	    handleAction({
	      index
	    }, item) {
	      if (index === 0) {
	        // 修改
	        this.editUser(item)
	      } else if (index === 1) {
	        // 删除
	        this.deleteUser(item)
	      }
	    },
	    editUser(item) {
	      // 编辑逻辑
	      this.flag = 1
	      this.title = '编辑用户'
	      this.$set(this.model, 'username', item.username)
	      this.$set(this.model, 'nickname', item.nickname)
	      this.$set(this.model, 'avatar', item.avatar)
	      this.$set(this.model, 'id', item.id)
	      this.fileList = [{
	        name: item.avatar,
	        thumb: item.avatar,
	        type: "image",
	        url: item.avatar
	      }]
	      this.showAdd = true
	    },
	    async deleteUser(item) {
	      const flag = await this.$modal.confirm('是否删除此用户')
	      if (!flag) return false;
	      const res = await deleteUser(item.id)
	      if (res.code == 200) {
	        this.$modal.msg('删除成功')
	        this.getUser()
	      }
	      console.log(res)
	    }
	  }
	}
</script>

<style scoped>
	page {
	  background-color: #ffffff;
	}

	.button {
	  padding-top: 60rpx;
	}

	.list {
	  margin-top: 20rpx;
	}

	.content {
	  padding: 0 20rpx;
	}

	::v-deep .u-form-item__body__left {
	  width: 50% !important;
	}

	::v-deep .u-form-item__body__right {
	  width: 50%;
	}

	::v-deep .uni-table {
	  width: 100%;
	  min-width: unset !important;
	}

	.uni-table-tr {
	  width: 100%;
	}

	::v-deep .u-swipe-action-item__content uni-view {
	  width: 100%;
	  /* 	  flex-direction: row; */
	}

	::v-deep .u-swipe-action {
	  width: 100%;
	}
</style>